<template>
  <div class="audit-data-container">
    <!-- 查询条件   -->
    <div class="audit-data-search-conditions">
      <div class="audit-user-name conditions-text">
        <span>用户名：</span>
        <a-select
          placeholder="请输入用户名搜索..."
          show-search
          style="height: 32px;
  width: 200px;"
          class="select"
          @search="handleSearch"
          @change="changeUserName"
        >
          <a-select-option v-for="option in memberOptions" :key="option.id" :value="option.name">
            {{option.name}}
          </a-select-option>
        </a-select>
      </div>
      <div class="conditions-text">
        <span>操作时间:</span>
        <a-range-picker
          :show-time="{ format: 'HH:mm:ss' }"
          format="YYYY-MM-DD HH:mm:ss"
          :placeholder="['开始时间', '结束时间']"
          @change="onChange"
          @ok="onOk"
        />
      </div>
      <div class="conditions-text">
        <span>操作类型:</span>
        <a-select default-value="ALL" style="width: 120px;" @change="handleChangeType">
          <a-select-option v-for="type in requestTypeList" :key="type.key" :value="type.key">{{type.name}}</a-select-option>
        </a-select>
      </div>
      <!--手动查询 -->
      <a-button icon="search" @click="clickBtnQuery">查询</a-button>
    </div>
    <!--   查询结果 -->
    <div id="id-audit-data" class="query-result scroll-y">

      <div class="result-table">
        <!-- 表 -->
        <audit-data-table
          :height="tableHeight"
          :table-data="tableData"
          :page-size="pageSize"
          :current-page="currentPage"
        />
        <!-- 分页器 -->
        <div class="data-pagination">
          <a-pagination
            v-model="currentPage"
            :page-size-options="pageSizeOptions"
            :total="total"
            show-size-changer
            :page-size="pageSize"
            @showSizeChange="onShowSizeChange"
            @change="pageChange"
          >
            <template slot="buildOptionText" slot-scope="props">
              <span v-if="props.value !== '100'">{{ props.value }}条/页</span>
            </template>
          </a-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * audit data
 * @author Jinhui Hou
 */
import { Component, Vue } from 'vue-property-decorator'
import AuditDataTable from '@/components/audit/AuditDataTable.vue'
import {
  adminAudit
} from '@/api/audit'
import {queryInfoByName} from '@/api/user'
import {debounce} from 'lodash'
// @ts-ignore
const elementResizeDetectorMaker = require('element-resize-detector')

@Component({
  components: {AuditDataTable},
})
export default class AuditData extends Vue {
  public currentUser: any = ''   // query
  // public searchUser: any[] = []
  // 操作类型
  public requestTypeList: any [] = [
    {name: '所有', key: 'ALL'},
    {name: '查询', key: 'QUERY'},
    {name: '添加', key: 'ADD'},
    {name: '删除', key: 'DELETE'},
    {name: '认证', key: 'AUTH'},
    {name: '导入', key: 'IMPORT'},
    {name: '其他', key: 'OTHER'},
  ]
  public currentType: string = 'ALL'    // query
  public startEndTime: string[] = []    // query  开始结束时间区间

  public pageSize: number = 20  // query pageSize
  public currentPage: number = 1   // query 当前页
  public total: number = 0   // 数据总量
  public pageSizeOptions: string[] = ['10', '20', '30', '40', '50', '60', '70', '80']   // 可选
  public tableHeight: number = 0  // 高度
  // 数据
  public tableData: any[] = []

  public mounted() {
    const self = this
    // 改为实时监听模式，避免表格高度不同步的情况
    this.$nextTick(()=>{
      const erdTable = elementResizeDetectorMaker()
      const auditTable = document.querySelector('#id-audit-data') as HTMLElement
      erdTable.listenTo( auditTable, (element: HTMLElement) => {
        self.tableHeight = element.clientHeight - 56
      })
      this.$once('hook:beforeDestroy', ()=>{
        erdTable.removeAllListeners(auditTable)
      })
    })
  }

  // 模糊搜索的用户
  public memberOptions: any[] = []
  // 选择用户
  public changeUserName(value: string) {
    this.currentUser = value
    // this.memberOptions = []
  }

  // 关键字 模糊搜索用户
  public handleSearch(searchKey: string) {
    if(searchKey.trim().length >= 2) {
      this.queryUsersByName(searchKey.trim())
    }
  }
  // 防抖
  private queryUsersByName = debounce((searchKey: string) => this._handleSearch(searchKey), 100)
  public _handleSearch(searchKey: string) {
    const parameters = {
      name: searchKey,
    }
    queryInfoByName({data: parameters})?.then((response: any) => {
      if(response.data.code === 100) {
        this.memberOptions = response.data.result
      }
    })
  }



  /**
   * 修改 pageSize
   */
  public onShowSizeChange(current: any, pageSize: any) {
    console.log(current)
    this.currentPage = 1
    this.pageSize = pageSize
    this.queryAuditData()
  }
  /**
   * 修改 page
   */
  public pageChange(page: number, pageSize: number) {
    this.pageSize = pageSize
    this.currentPage = page
    this.queryAuditData()
  }

  /**
   * 点击查询
   */
  public clickBtnQuery() {
    this.currentPage = 1
    this.queryAuditData()
  }

  /**
   * 查询 api
   */
  public queryAuditData() {
    const parameters = {
      username: this.currentUser,
      startTime: this.startEndTime[0],
      endTime: this.startEndTime[1],
      requestType: this.currentType === 'ALL'? null : this.currentType,
      curPage: this.currentPage,
      pageSize: this.pageSize,
    }
    adminAudit({data: parameters})?.then((response: any) => {
      if(response.data.code === 100) {
        this.tableData = response.data.result.list
        this.total =  response.data.result.total
      }
    })
  }

  // 日期时间选择相关
  public onChange(date: any, dateString: any) {
    console.log(date)
    this.startEndTime = dateString
  }
  // 选择日期时间 ok
  public onOk(value: any) {
    console.log(value)
  }
  // 选择操作类型
  public handleChangeType(value: string) {
    this.currentType = value
    console.log(this.currentType, value)
  }
}
</script>

<style lang="less" scoped>
@import '@/constants';

.audit-data-container {
  background-color: #fff;
  display: flex;
  flex-direction: column;
  height: calc(100% - 24px);
  margin: 12px 16px;
  position: relative;
  width: calc(100% - 32px);

  /* 查询条件 */
  .audit-data-search-conditions {
    line-height: 40px;
    padding: 18px;

    .conditions-text {
      display: inline-block;
      margin-right: 24px;

      span {
        margin-right: 6px;
      }
    }

    .audit-user-name {
      /deep/.ant-input {
        width: 120px;
      }
    }
  }

  .query-result {
    height: calc(100% - 76px);
    overflow: auto;
    padding: 0 18px;

    /*.result-table {*/
    /*  overflow-y: auto;*/
    /*}*/

    /* 分页器 */
    .data-pagination {
      align-items: center;
      background-color: #fff;
      bottom: 0;
      display: inline-block;
      padding: 12px;
      width: calc(100% - 32px);
    }
  }
}

/deep/.ant-table-body {
  &::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #888;
  }

  &::-webkit-scrollbar-button {
    background-color: #f1f1f1;
    height: 6px;
    width: 6px;
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }
}

.scroll-y {
  &::-webkit-scrollbar {
    height: 6px;
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #888;
  }

  &::-webkit-scrollbar-button {
    background-color: #f1f1f1;
    height: 6px;
    width: 6px;
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }
}


</style>
